import React from 'react'

import { Card, Button, Input, Divider, Radio, Icon, message} from 'antd'

import {connect} from 'react-redux'
import { Container } from './style'

import moment from 'moment'

import Main from '../../request/main'
const request = new Main()


interface Props {
    todayPlan: any
    history: any
    location: any
}
interface State {
    title: string
    content: string
    radio: string
}
class Add extends React.Component<Props, State>{
    readonly state: Readonly<State> = {
        title: '',
        content: '',
        radio: '明日计划'
    }

    componentDidMount(){
        if (this.getUrlParams(this.props.location.search).notEmpty === '1') {
            this.setState({
                title: this.props.todayPlan.title,
                content: this.props.todayPlan.content
            })
        }
    }
    

    addNewPlan(){
        if (this.state.title === '' || this.state.content === '') {
            return message.error('骚凹瑞～标题或内容不能为空！')
        }
        request.addPlan({
            title: this.state.title,
            content: this.state.content,
            date: this.state.radio === '明日计划' ? moment().add(1, 'days').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')
        }).then(() => {
            message.success('计划制定成功！')
            this.props.history.replace('/home')
        })
    }

    getUrlParams(url: string) {
        let theRequest: any = {}
        if (url.indexOf("?") !== -1) {
            let str = url.substr(1)
            let strs = str.split("&")
            for (let i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])
            }
        }
        return theRequest
    }

    render(): any{
        return (
            <Container>
                <Card
                    title={<Button type="link" size="large">可以开始制定计划啦～</Button>}
                    extra={<span style={{ opacity: 0 }}>1</span>}
                >
                    <div>
                        <div className="input-radio">
                            <Input
                                placeholder="请输入计划标题"
                                maxLength={25}
                                size="large"
                                allowClear 
                                style={{ flex: 1 , marginRight: 160}}
                                value={this.state.title}
                                onChange={(e) => this.setState({ title: e.target.value })}
                                prefix={<Icon type="form"/>}
                            ></Input>
                            <Radio.Group value={this.state.radio} onChange={(e) => this.setState({ radio: e.target.value })} buttonStyle="solid">
                                <Radio.Button value="今日计划">今日计划</Radio.Button>
                                <Radio.Button value="明日计划">明日计划</Radio.Button>
                            </Radio.Group>
                        </div>
                        <Divider />
                        <Input.TextArea
                            placeholder="请输入计划内容"
                            allowClear
                            autoSize={{ minRows: 10, maxRows: 20 }}
                            maxLength={500}
                            value={this.state.content}
                            onChange={(e) => this.setState({ content: e.target.value})}
                        >
                        </Input.TextArea>
                        <Divider />
                        <div style={{textAlign: 'right'}}>
                            <Button type="primary" style={{ borderColor: '#67c23a', color: '#67c23a' }} icon="form" ghost onClick={() => this.addNewPlan()}>确认定制</Button>
                            <Button type="primary" icon="double-left" ghost onClick={() => this.props.history.push('/home')}>返回首页</Button>
                        </div>
                    </div>
                </Card>
            </Container>
        )
    }
}

const mapState = (state: any) => ({
    todayPlan: state.todayPlan
})

export default connect(mapState)(Add)